<script setup lang="ts">

import {useMaterialOutStore} from "@/stores/materialOutStore.ts";
import {onMounted,ref} from "vue";
// import {useDataPublicStore} from "@/stores/dataPublicStore.ts";
import router from "@/router/index.js";
import dayjs from "dayjs";
import {ElMessage} from "element-plus";

const materialOutStore=useMaterialOutStore();

// const dataPublicStore=useDataPublicStore();


onMounted( async ()=>{
  await materialOutStore.getAllMaterialOutStore(current.value,pageSize.value);
})

// 分页显示数据
const current=ref(1);
const pageSize=ref(15);


// 多功能名称查询模块
const multifunctionName=ref('');

const dateValue = ref('')
const options = [
  {
    value: 'todayDate',
    label: '今天',
  },
  {
    value: 'thisWeekDate',
    label: '7天内',
  },
  {
    value: 'thisMonthDate',
    label: '30日内',
  },
  {
    value: 'thisSeasonDate',
    label: '90日内',
  },
  {
    value: 'thisYearDate',
    label: '365日内',
  },
  {
    value: 'customDate',
    label: '自定义',
  },
]



const disable=ref(false);
// 时间选择器中，开始、结束时间
const startDate=ref(new Date());
const endDate=ref(new Date());

const getMaterialOutFormListByChooseTime=async ()=>{

  fullMaterialOutFormListFlag.value=false;
  getByCreateTimeFlag.value=true;
  getListByMultifunctionNameFlag.value=false;

  if (dateValue.value==='todayDate'){
    startDate.value=new Date(dayjs().add(0, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);
  }
  if (dateValue.value==='thisWeekDate'){
    startDate.value=new Date(dayjs().add(-7, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);
  }
  if (dateValue.value==='thisMonthDate'){
    startDate.value=new Date(dayjs().add(-30, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);
  }
  if (dateValue.value==='thisSeasonDate'){
    let start=dayjs().add(-90, 'd').startOf('day').format('YYYY-MM-DD');
    let end= dayjs().format('YYYY-MM-DD');
    await  materialOutStore.getByBetweenTimesStore(new Date(start) ,new Date(end) ,current.value,pageSize.value);
  }
  if (dateValue.value==='thisYearDate'){
    startDate.value=new Date(dayjs().add(-365, 'd').startOf('day').format('YYYY-MM-DD'));
    endDate.value=new Date(dayjs().format('YYYY-MM-DD'));
    await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);
  }
  if (dateValue.value=='customDate'){
    disable.value=true;
  }
}

// 通过时间选择器选择时间
const dateTime=ref([]);
const dateOne=ref(Date);
const dateTwo=ref(Date);
const getMaterialOutListByDatePicker=async ()=>{
  // 搜索所有的transfer的表单标志
  fullMaterialOutFormListFlag.value=false;
// 根据表单创建时间的表单标志
  getByCreateTimeFlag.value=true;
//  多中类型名称查询表单标志
  getListByMultifunctionNameFlag.value=false;

  dateOne.value=dateTime.value[0];
  dateTwo.value=dateTime.value[1];

  startDate.value=dateTime.value[0];
  endDate.value=dateTime.value[1];
  // 最后一天，他的时间是最后一天日期的0：00,所以必须要加上一天24*1000*3600
  endDate.value.setTime(endDate.value.getTime()+3600*1000*24);
  await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);
}


const getListByMultifunctionName=async ()=>{
  if (multifunctionName.value===''){
    ElMessage({
      message:'查询条件不能为空',
      type:'warning'
    })
    return;
  }
  fullMaterialOutFormListFlag.value=false;
  getByCreateTimeFlag.value=false;
  getListByMultifunctionNameFlag.value=true;
  await materialOutStore.getAllByMultifunctionNameStore(multifunctionName.value,current.value,pageSize.value);

  console.log(materialOutStore.allMaterialOutList);


}

const reloadFullList=async ()=>{
  fullMaterialOutFormListFlag.value=true;
  getByCreateTimeFlag.value=false;
  getListByMultifunctionNameFlag.value=false;
  await materialOutStore.getAllMaterialOutStore(current.value,pageSize.value)
}

// 根据不同的条件，会出现不同的分页搜索结果，但要设立标志来用于那种搜索。这个组件默认fullTransferFormListFlag=true,其它是false
// 再根据采取的不同搜索条件来更改各个flag的布尔值
// 这些flag值根据搜索条件会慢慢增加
// 搜索所有的transfer的表单标志
const fullMaterialOutFormListFlag=ref(true);
// 根据表单创建时间的表单标志
const getByCreateTimeFlag=ref(false);
//  多种类类型名称查询表单标志
const getListByMultifunctionNameFlag=ref(false);

// 分页组件的每页条数值改变
const handleSizeChange=async (val:any)=>{
  pageSize.value=val;
  if (fullMaterialOutFormListFlag.value===true){
    await materialOutStore.getAllMaterialOutStore(current.value,val);
  }

  else if(getByCreateTimeFlag.value===true){
    // 函数第一，第二个参数应该是start,end
    await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);

  }
  else if (getListByMultifunctionNameFlag.value===true){
    await  materialOutStore.getAllByMultifunctionNameStore(multifunctionName.value,current.value,val);
  }

}
// 分页组件的第几页数值改变
const handleCurrentChange=async (val:any)=>{
  current.value=val;
  if (fullMaterialOutFormListFlag.value==true){
    await materialOutStore.getAllMaterialOutStore(val,pageSize.value);
  }

  else if (getByCreateTimeFlag.value===true){
    await  materialOutStore.getByBetweenTimesStore(startDate.value,endDate.value,current.value,pageSize.value);

  }
  else if (getListByMultifunctionNameFlag.value===true){
    await  materialOutStore.getAllByMultifunctionNameStore(multifunctionName.value,val,pageSize.value);
  }
}

// 进入表格中一条数据的详细页面
// const oneMaterialOutShow=(scope:any)=>{
//   dataPublicStore.saveDataObject(scope);
//   router.push({path:'/home/material/materialInDetail'});
// }

</script>

<template>
  <!-- 面包屑 -->
  <div class="bread-container">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: `/` }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:`/home/material`}" >材料主页</el-breadcrumb-item>
      <el-breadcrumb-item  >材料出场列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>


  <!--这里放置各种查询组件  -->
  <div class="demo-date-picker">
    <span  class="block">
      <!--  多种类型名称查询-->
      <el-input v-model="multifunctionName" size="small"  clearable style="width: 260px;margin-left: 20px" placeholder="材料名称/项目名称/领取人/领取项目" @clear="reloadFullList" />&nbsp;
        <el-button type="primary" size="small" @click="getListByMultifunctionName">查询</el-button>
      <el-select
          v-model="dateValue"
          clearable
          placeholder="Select"
          style="width: 240px;margin-left: 10px"
          size="small"
          @change="getMaterialOutFormListByChooseTime"
          @clear="reloadFullList"
      >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
    </span>
    <el-dialog title="请选择时间" width="450" v-model="disable"  >
      <el-date-picker
          v-model="dateTime"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :size="'small'"
          @change="getMaterialOutListByDatePicker"
      />
    </el-dialog>
  </div>


  <!--  这里放置各种查询组件-->
  <!--  分页显示设备数据-->
  <div class="table_contain">
    <div  class="block" style="float: right;padding-bottom: 20px">
      <el-pagination v-model:currentPage="current"
                     :page-sizes="[10,15,30]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="materialOutStore.allMaterialOutCounts"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     small
                     background
      >
      </el-pagination>
    </div>

    <!-- 对表格中的字段排序，在表格属性中添加:default-sort,后面参数是需要排序的字段，
         order:后面是排序要求,这里是descending,然后在需要排序的列元素中添加sortable属性-->
    <div >
      <el-table
          :data="materialOutStore.allMaterialOutList"
          style="width: 100%;height: 100%"
          stripe
          border
          max-height="780"
          :default-sort="{prop:'updateTime',order:'descending',}"
      >
        <el-table-column prop="materialName" fixed label="材料名称" width="220" />

        <el-table-column prop="brand" label="品牌" width="100" />

        <el-table-column prop="model" label="型号" width="120" />

        <el-table-column prop="pieces" label="单位" width="60" />

        <el-table-column prop="number" label="数量" width="60"/>

        <el-table-column prop="typeName" label="材料类型" width="150"/>

<!--        <el-table-column prop="encode"  label="表单编号" width="250"    sortable />-->

        <el-table-column prop="warehouse" label="材料所在仓库" width="200"/>

        <el-table-column prop="layout" label="货架号" width="80"/>

        <el-table-column prop="receiveProject" label="接收项目" width="180"/>
        <el-table-column prop="recipient" label="领取人" width="100"/>

        <el-table-column prop="createBy" label="操作人" width="150"/>

        <!--        <el-table-column prop="receivingProject" label="设备转场目的地" width="200"/>-->

        <el-table-column prop="description" label="备注" width="270"/>

        <el-table-column  label="操作" width="120" fixed="right">
          <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                       scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
          <template #default="scope">
            <el-button size="small" type="warning" plain  @click="router.push({path:`/home/material/materialOutDetail/${scope.row.id}`})">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="float: right;padding-bottom: 20px">
      <el-pagination v-model:currentPage="current"
                     :page-sizes="[10,15,30]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="materialOutStore.allMaterialOutCounts"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     small
                     background
      >
      </el-pagination>
    </div>
  </div>

</template>

<style scoped lang="scss">
.block {
  margin-right: 260px;
}

.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
        width: 168px;
        height: 160px;


        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      // .xtx-more {
      //   position: absolute;
      //   top: 20px;
      //   right: 20px;
      // }

      // .tag {
      //   text-align: center;
      //   color: #999;
      //   font-size: 20px;
      //   position: relative;
      //   top: -20px;
      // }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }
}
.home-banner {
  width: 1240px;
  height: 500px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 500px;
  }
}

.table_contain {
  margin-left: 25px;
  padding-left: 35px;
}

.bread-container {
  padding: 25px 10px;
  margin-left: 10px;
}
.equipmentController{
  padding-left: 80px;
}
.equipmentParentType{
  appearance: none;
  text-align: center;
  height: 30px;
  width: 150px;
  //border-radius: 15px;
  padding: 0 8px;
  outline: 0;
  letter-spacing: 1px;
  color: #1a1616;
  font-weight: 600;
  background: rgba(45,45,45,.10);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
</style>